import React, {
	PureComponent
} from 'react';
import Topic from './components/Topic';
import List from './components/List';
import Recommend from './components/Recommend';
import Writer from './components/Writer';
import {
	HomeWrapper,
	HomeLeft,
	HomeRight,
	BackTop
} from './style';
import {
	actionCreators
} from './store';
import {
	connect
} from 'react-redux';


class Home extends PureComponent {
	render() {
		return (
			<HomeWrapper>
				<HomeLeft>
					<img className = 'banner-img' src='http://localhost:3000/api/test-1.jpg' alt = 'haha' />
					<Topic />
					<List />
				</HomeLeft>
				<HomeRight>
					<Recommend />
					<Writer />
				</HomeRight>
				{
					this.props.showScroll ? <BackTop onClick = {this.handleScrollTop}>顶部</BackTop> : null
				}
			</HomeWrapper>
		)
	}

	handleScrollTop() {
		window.scrollTo(0, 0);
	}

	componentDidMount() {
		this.props.changeHomeData();
		this.bindEvents();
	}

	componentWillUnmount() {
		window.removeEventListener('scroll', this.props.changeScrollTopShow);
	}

	bindEvents() {
		window.addEventListener('scroll', this.props.changeScrollTopShow);
	}

}

const mapState = (state) => ({
	showScroll: state.getIn(['home', 'showScroll'])
});

const mapDispatchToProps = (dispatch) => ({
	changeHomeData() {
		dispatch(actionCreators.getHomeInfo());
	},
	changeScrollTopShow() {
		if (document.documentElement.scrollTop > 400) {
			dispatch(actionCreators.toggleTopShow(true));
		} else {
			dispatch(actionCreators.toggleTopShow(false));
		}
	}
});

export default connect(mapState, mapDispatchToProps)(Home);